<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <style>
        table{
            width: 600px;
            border-collapse: collapse;
        }
        th,td{
            border: 1px solid #ccc;
        }
        tr{
            text-align: center;
        }
        .btn{
            background: #4662d9;
            width: 80px;
            height: 29px;
            display: inline-block;
            color: #fff;
            text-decoration: none;
            text-align: center;
            line-height: 29px;
            border-radius: 6px;
        }
        #pagination{
            width: 600px;
            text-align: center;
            margin-top: 5px;
        }
        #pagination a{
            background: #999;
            width: 20px;
            height: 20px;
            display: inline-block;
            color: #fff;
            text-decoration: none;
            font-size: 12px;
            line-height: 20px;
        }
        #pagination a.previous,#pagination a.next{
            width: 50px;
            background: #fff;
            color: #000;
        }
        .current{
            background: #ff7300!important;
        }
    </style>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
    <script>
        function goPage(i) {
            // 判断是否为上一页或下一页
            if(i == -1){
                i = ${pageInfo.pageNo==1 ? 1 : pageInfo.pageNo-1}
            }else if(i == -2){
                i = ${pageInfo.pageNo==pageInfo.pages ? pageInfo.pageNo : pageInfo.pageNo+1}
            }

            // 设置页码
            $('input[name=pageNo]').val(i)

            // 提交表单
            $('#formQuery').submit();
        }
    </script>
</head>
<body>
    欢迎您：${user.name}
    <a href="logout.user" style="margin-left: 450px;">退出</a>
    <hr>
    <a href="toAdd.emp" class="btn">添加</a>
    <br><br>

    <%-- 多条件查询 --%>
    <form action="findAll.emp" method="post" id="formQuery">
        <input type="hidden" name="pageNo" value="1">
        姓名：<input type="text" name="name" size="8" value="${param.name}"> &nbsp;&nbsp;
        性别：<input type="radio" name="sex" value="男"  <c:if test="${param.sex=='男' || param.sex==null}">checked</c:if>>男
             <input type="radio" name="sex" value="女" <c:if test="${param.sex=='女'}">checked</c:if>>女 &nbsp;&nbsp;
        部门：<select name="deptId">
                <option value="0">--请选择部门--</option>
                <c:forEach items="${depts}" var="dept">
                    <option value="${dept.id}"  <c:if test="${param.deptId==dept.id}">selected</c:if> >${dept.name}</option>
                </c:forEach>
            </select>  &nbsp;&nbsp;
            <input type="submit" class="btn" style="border: 0;" value="查询">
    </form>

    <table>
        <thread>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>身高</th>
                <th>出生日期</th>
                <th>部门</th>
                <th>操作</th>
            </tr>
        </thread>
        <tbody>
            <c:forEach items="${pageInfo.list}" var="emp" varStatus="status">
                <tr>
                    <td>${status.index+1}</td>
                    <td>${emp.name}</td>
                    <td>${emp.age}</td>
                    <td>${emp.sex}</td>
                    <td>${emp.height}</td>
                    <td>${emp.birthday}</td>
                    <td>${emp.department.name}</td>
                    <td>
                        <a href="toModify.emp?id=${emp.id}" class="btn">修改</a>
                        <a href="removeById.emp?id=${emp.id}" class="btn">删除</a>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>

    <%-- 分页 --%>
    <div id="pagination">
        <a href="javascript:;" onclick="goPage(-1)" class="previous">上一页</a>
        <c:forEach begin="1" end="${pageInfo.pages}" var="i">
            <a href="javascript:;" onclick="goPage(${i})" <c:if test="${i==pageInfo.pageNo}">class="current"</c:if>>${i}</a>
        </c:forEach>
        <a href="javascript:;" onclick="goPage(-2)" class="next">下一页</a>
    </div>
</body>
</html>
